<template>
	<view class="bottom-button-wrap iphonex-footer">
		<view v-if="type==0" class="bottom-button-value" :style="disabled ? 'background: #CCCCCC;' : ''" @click="onClick">{{ value }}</view>
		<view v-if="type==1" class="bottom-box">
			<view class="bottom-box-left">
				<view class="content">{{ content }}：</view>
				<view class="num">{{ unit == '元' ? '¥&nbsp;' : '' }}{{ num }}</view>
				<view class="word4">{{ unit }}</view>
			</view>

			<view class="bottom-box-right" @click="onClick">{{value}}</view>
		</view>
		
		<view  v-if="type==2" class="double-bottom-box">
			<view class="double-bottom-delete" v-if="value1" @click="onClickOne">{{value1}}</view>
			<view class="double-bottom-save" v-if="value2" @click="onClickTwo">{{value2}}</view>
		</view>
		
		<view  v-if="type==3" class="double-bottom-mini">
			<view class="double-bottom-left" v-if="value1" @click="onClickOne">{{value1}}</view>
			<view class="double-bottom-right" v-if="value2" @click="onClickTwo">{{value2}}</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		type: {
			type: String|Number,
			default: 0
		},
		value: {
			type: String,
			default: ''
		},
		disabled: {
			type: Boolean,
			default: false
		},
		content: {
			type: String,
			default: ''
		},
		num: {
			type: String,
			default: '0.00'
		},
		unit: {
			type: String,
			default: '元'
		},
		
		value1: {
			type: String,
			default: ''
		},
		value2: {
			type: String,
			default: ''
		},
		
	},
	data() {
		return {};
	},
	onLoad(option) {},
	onShow() {},
	methods: {
		onClick() {
			if (!this.disabled) {
				this.$emit('click');
			}
		},
		onClickOne(){
			this.$emit('clickOne');
		},
		onClickTwo(){
			this.$emit('clickTwo');
		}
	}
};
</script>

<style lang="less">
.bottom-button-wrap {
	background-color: rgba(255, 255, 255, 1);
	width: 749rpx;
	// height: 110rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
	.bottom-button-value {
		width: 685rpx;
		height: 90rpx;
		margin: 20rpx auto;
		border-radius: 45rpx;
		background-color: rgba(128, 108, 255, 1);
		justify-content: center;
		align-items: center;
		display: flex;
		color: rgba(255, 255, 255, 1);
		font-size: 30rpx;
		font-family: PingFangSC-Medium;
	}

	.bottom-box {
		margin-left: 30rpx;
		padding: 20rpx 32rpx;
		display: flex;
		.bottom-box-left {
			display: flex;
			align-items: center;
			.content {
				overflow-wrap: break-word;
				color: rgba(0, 0, 0, 1);
				font-size: 34rpx;
				font-family: PingFangSC-Regular;
				white-space: nowrap;
				line-height: 48rpx;
				
			}
			.num {
				color: rgba(255, 65, 65, 1);
				font-size: 40rpx;
				font-family: PingFangSC-Medium;
				white-space: nowrap;
				margin-right: 12rpx;
			}
			.word4 {
				overflow-wrap: break-word;
				color: rgba(255, 65, 65, 1);
				font-size: 30rpx;
				font-family: PingFangSC-Regular;
				white-space: nowrap;
				margin-top: 10rpx;
			}
		}
		
		.bottom-box-right {
		
			height: 90rpx;
			border-radius: 45rpx;
			background-color: rgba(128, 108, 255, 1);
			margin-left: auto;
			width: 260rpx;
			justify-content: center;
			align-items: center;
			display: flex;
			flex-direction: column;
			color: rgba(255, 255, 255, 1);
			font-size: 30rpx;
			font-family: PingFangSC-Medium;
		}
		
		
	}


	.double-bottom-box {
			box-sizing: border-box;
			padding: 20rpx 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.double-bottom-delete {
				width: 266rpx;
				height: 90rpx;
				border-radius: 45rpx;
				border: 1rpx solid rgba(128, 108, 255, 1);
				justify-content: center;
				align-items: center;
				display: flex;
				color: rgba(128, 108, 255, 1);
				font-size: 30rpx;
				font-family: PingFangSC-Medium;
			}
			.double-bottom-save {
				width: 266rpx;
				height: 90rpx;
				border-radius: 45rpx;
				background-color: rgba(128, 108, 255, 1);
				justify-content: center;
				align-items: center;
				display: flex;
				color: rgba(255, 255, 255, 1);
				font-size: 30rpx;
				font-family: PingFangSC-Medium;
			}
		}
		
		
		
		.double-bottom-mini {
				box-sizing: border-box;
				padding: 20rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.double-bottom-left {
					width: 195rpx;
					height: 50rpx;
					border-radius: 25rpx;
					border: 1rpx solid rgba(128, 108, 255, 1);
					justify-content: center;
					align-items: center;
					display: flex;
					color: rgba(128, 108, 255, 1);
					font-size: 28rpx;
					font-family: PingFangSC-Medium;
					margin-right: 20rpx;
				}
				.double-bottom-right {
					width: 195rpx;
					height: 50rpx;
					border-radius: 25rpx;
					background-color: rgba(128, 108, 255, 1);
					justify-content: center;
					align-items: center;
					display: flex;
					color: rgba(255, 255, 255, 1);
					font-size: 28rpx;
					font-family: PingFangSC-Medium;
				}
			}
		
}
</style>
